<template>
  <div class="icoPage">
    <assets-head :title="$t('首发交易')"/>
    <div class="ico flex items-center pl-32">
      <div class="icoTabsItems" v-for="item in icoTabs" :class="tabActive === item.id ? 'icoTabsItemsActive' :'' " :key="item.id"
           @click="changicoType(item.id) " v-if="item.id !== 0"
      >
        <span>{{item.title}}</span>
      </div>
    </div>
    <div class="icoCoinBox px-32 mt-28">
      <van-list v-model="buySellLoading" :loading-text="$t('加载中...')" :finished="buySellFinished" :immediate-check="false"
                :finished-text="icoCoins.length ? $t('已经全部加载完毕') : ''" @load="getIcoList"
                offset="130" class="">
        <div class="icoCoinItems py-32 px-32 rounded-2xl mb-30" v-for="(item,index) in icoCoins" :key="index" @click="goDetails(item)">
          <div class="icoCoin">
            <div class="flex items-center">
              <img :src="`${HOST_URL}/symbol/${item.isUserIco ? item.product_name.toLocaleLowerCase() : item.name.toLocaleLowerCase()}.png`"
                   alt="logo" class="w-72 h-72 rounded-full mr-16" />
              <span>{{item.isUserIco ? item.product_name : item.name }}</span>
            </div>
            <div class="py-14 btnMain text-white font-25 px-21 rounded-lg">{{btnTextCop(item)}}</div>
          </div>
          <!--        进度条-->
          <div class="mt-40 mb-70" v-if="!item.isUserIco">
            <van-progress :percentage="copPercent(item.remain_amount,item.amount_limit)" color="#1374F6"/>
          </div>
          <!--        价格-->
          <div class="icoCoin">
            <div>{{$t('价格')}}:</div>
            <div>{{item.isUserIco ? item.order_unit_price : item.price}} USDT</div>
          </div>
          <div class="icoCoin" v-if="item.isUserIco">
            <div>{{$t('数量')}}:</div>
            <div>{{item.totle_price}} USDT</div>
          </div>
          <div class="icoCoin">
            <div>{{item.isUserIco ? $t('剩余总量') :$t('活动总量')}}:</div>
            <div>{{ item.isUserIco ? item.remain_amount : item.amount_limit}}</div>
          </div>
          <div class="icoCoin">
            <div>{{$t('开始时间')}}:</div>
            <div>{{item.isUserIco ? item.product_apply_time : item.apply_time}}</div>
          </div>
          <div class="icoCoin">
            <div>{{$t('结束时间')}}:</div>
            <div>{{item.isUserIco ? item.product_sell_time  : item.sell_time}}</div>
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具 js，第三方插件 js，json 文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》 ';
import {Progress, Popup, List, PullRefresh} from 'vant';
import { mapGetters } from 'vuex';
import {_getIcoList, _getIcoDetails, _icoUserOrder,} from "@/API/ico";
import AssetsHead from "@/components/assets-head/index.vue";
import {HOST_URL} from "@/config";
export default {
  // import 引入的组件需要注入到对象中才能使用
  components: {
    AssetsHead,
    [Progress.name]:Progress,
    [Popup.name]:Popup,
    [List.name]: List,
    [PullRefresh.name]:PullRefresh,
  },
  props: {},
  data() {
    // 这里存放数据
    return {
      icoTabs:[
        {id:0,title:this.$t('全部')},
        {id:1,title:this.$t('即将开始')},
        {id:2,title:this.$t('进行中')},
        {id:3,title:this.$t('派发中')},
        {id:4,title:this.$t('已完成')},
      ],
      tabActive:1,
      icoListType:false,//false 可申购，true 待申购 all全部 finish已完成
      icoCoins:[],
      page: 1,
      buySellLoading:false,
      buySellFinished:false,
      HOST_URL,
    }
  },
  // 计算属性 类似于 data 概念
  computed: {
    ...mapGetters('user', ['userInfo']),

  },
  // 监控 data 中的数据变化
  watch: {},
  // 方法集合
  methods: {
    //剩余ico 百分比计算
    copPercent(num1,num2){
      let tempNum = this.$bigDecimal.divide(num1,num2)
      tempNum = tempNum *100
      return this.$bigDecimal.round(tempNum,2)
    },
    btnTextCop(item){
      let text = ''
      if(item.isUserIco){
        // console.log('item',item.state);
        if(item.state === '1'){
          text = this.$t('已中签')
        }else if(item.state === '2'){
          text = this.$t('未中签')
        }else{
          text = this.$t('未开始')
        }
      }else{
        if(item.today_flag === 'finish'){
          text = this.$t('已完成')
        }else if(item.today_flag){
          text = this.$t('进行中')
        }else{
          text = this.$t('即将开始')
        }      }
      return text
    },
    goDetails(item){
      this.$router.push({
        name: 'icoDetails',
        params:{
          icoData:item,
        }
      })
    },
    initData(){
      this.icoCoins = []
      this.icoUserList = []
      this.page = 1
      this.buySellLoading = true
      this.buySellFinished = false
    },
    //用户ico 列表
    getIcoUserOrder(){
      if(this.userInfo.token){
        _icoUserOrder({
          page_no:this.page
        }).then(res=>{
          // console.log('res',res)
          this.icoCoins = [...this.icoCoins, ...res.data,]
          this.icoCoins.forEach(item=>{
            item.isUserIco = true
          })
          // console.log('icoCoins222',this.icoCoins)
          this.buySellLoading = false
          if (res.data.length < 10) {
            this.buySellFinished = true
          } else {
            this.page++
          }
        })
      }
    },
    //获取ICO列表
    getIcoList(){
      _getIcoList({
        page_no:this.page,
        pageSize:10,
        today_flag:this.icoListType
      }).then(res=>{
        // console.log('res',res)
        this.icoCoins = [...this.icoCoins, ...res.data,]
        this.icoCoins.forEach(item=>{
          item.isUserIco = false
          item.today_flag = this.icoListType
        })
        this.buySellLoading = false
        if (res.data.length < 10) {
          this.buySellFinished = true
        } else {
          this.page++
        }
      })
    },
    //可申购 待申购
    changicoType(id){
      this.tabActive = id
      this.initData()
      switch (id) {
        case 0:{
          this.icoListType = 'all'
          this.getIcoList()
          break
        }
        case 1:{
          this.icoListType = false
          this.getIcoList()
          break
        }
        case 2:{
          this.icoListType = true
          this.getIcoList()
          break
        }
        case 3:{
          this.getIcoUserOrder()
          break
        }
        case 4:{
          this.icoListType = 'finish'
          this.getIcoList()
          break
        }
      }
    },
  },
  // 生命周期 - 创建完成（可以访问当前this 实例）
  created() {
  },
  // 生命周期 - 挂载完成（可以访问 DOM 元素）
  mounted() {
    this.getIcoList()
  },
  beforeCreate() {
  },
  beforeMount() {
  }, // 生命周期 - 挂载之前
  beforeUpdate() {
  }, // 生命周期 - 更新之前
  updated() {
  }, // 生命周期 - 更新之后
  beforeDestroy() {
  }, // 生命周期 - 销毁之前
  destroyed() {
  }, // 生命周期 - 销毁完成
  activated() {
  } // 如果页面有 keep-alive 缓存功能,这个函数会触发
}
</script>


<style scoped lang="scss">
@import "@/assets/init";
.icoPage{
  min-height: 100vh;
  @include themify(){
    background: themed('ico_bg');
  }
  #assetsHead{
    ::v-deep .van-nav-bar{
      @include themify(){
        background: themed('ico_bg');
      }
    }
  }
}
.ico{
  .icoTabsItems{
    font-size: 32px;
    color: #474A55;
    padding-bottom: 12px;
    text-align: center;
    span:last-child{
      word-break: break-word;
    }
  }
  .icoTabsItemsActive{
    @include themify(){
      border-bottom: 2px solid themed('color_main');
      color: themed('color_main');
      font-weight: 700;
    }
  }
  /*  .icoItems:first-child {
      margin-left: 42px;
    }*/
  .icoTabsItems:nth-child(n+2){
    margin-left: 42px;
  }
}
.icoCoinBox{
  .icoCoinItems{
    background: #fff;
    .icoCoin{
      margin-bottom: 28px;
    }
    .icoCoin:last-child{
      margin-bottom: 0;
    }
    .icoCoin{
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
</style>